<div class="tree">
    <ul>
      <li>
        <div class="node">
          <span class="node__label">Parent Node</span>
          <ul>
            <li>
              <div class="node">
                <span class="node__label">Child Node 1</span>
              </div>
            </li>
            <li>
              <div class="node">
                <span class="node__label">Child Node 2</span>
                <ul>
                  <li>
                    <div class="node">
                      <span class="node__label">Grandchild Node</span>
                    </div>
                  </li>
                  <li>
                    <div class="node">
                      <span class="node__label">Grandchild Node</span>
                    </div>
                  </li>
                  <li>
                    <div class="node">
                      <span class="node__label">Grandchild Node</span>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>

  <style>
    .tree ul {
  list-style-type: none;
  padding-left: 0;
}

.node {
  @apply flex items-center;
  @apply my-2;
}

.node__label {
  @apply px-2 py-1 rounded-md bg-gray-100 text-gray-800;
}

/* 可选：为层级添加区分 */
.node ul {
  @apply pl-4;
}

/* 为子节点添加缩进效果 */
.node + .node {
  @apply ml-4;
}
</style>